<template>
    <div
        style="
            width: 100%;
            padding: 20px 40px;
            background: #fff;
            border-radius: 20px;
        ">
        <div
            style="
                margin-bottom: 60px;
                font-size: 0.28rem;
                font-weight: bold;
                text-align: center;
            ">
            个人账号信息
        </div>
        <div style="padding: 0 30vw; width: 100%">
            <el-form
                ref="ruleFormRef"
                style="width: 100%"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                :size="formSize"
                status-icon>
                <el-form-item label="账号" prop="username">
                    <el-input
                        v-model="ruleForm.username"
                        :disabled="!isedit"
                        placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        v-model="ruleForm.password"
                        :disabled="!isedit"
                        placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input
                        v-model="ruleForm.nickname"
                        :disabled="!isedit"
                        placeholder="请输入昵称" />
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input
                        v-model="ruleForm.mobile"
                        :disabled="!isedit"
                        placeholder="请输入手机号" />
                </el-form-item>
            </el-form>
            <div
                style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 20px;
                ">
                <el-button
                    type="primary"
                    @click="submitForm(ruleFormRef)"
                    style="font-size: 0.2rem; padding: 20px 40px;margin-top: 10vh;">
                    保 存
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide, reactive, toRaw, inject } from "vue";
import { ElMessage } from "element-plus";
import { post, baseURL } from "../../../../api/request";
import type { FormInstance, FormRules } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
import { ElUpload } from "element-plus";

let showflag = ref(false);
let title = ref("新增公司");
let isedit = ref(true);
let device_id = ref("");
let token = ref("");
const getdata = inject<() => void>("getdata")!; //父组件的方法
const yyzzupload = ref<InstanceType<typeof ElUpload>>();
const jyxkzupload = ref<InstanceType<typeof ElUpload>>();
let citylist = ref([]);
let arealist = ref([]);

onMounted(() => {
    token.value = localStorage.getItem("token") || "";

    post({
        url: "/api/danwei/grdetails",
        data: {},
    }).then((res: any) => {
        Object.assign(ruleForm, res.data);
    });
});

//表单相关---------------------------------------
interface RuleForm {
    id: string;
    username: string;
    password: string;
    nickname: string;
    mobile: string;
}

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
let ruleForm = reactive<RuleForm>({
    id: "",
    username: "",
    password: "",
    nickname: "",
    mobile: "",
});

const rules = reactive<FormRules<RuleForm>>({
    username: [{ required: true, message: "请填写账号", trigger: "blur" }],
    password: [{ required: true, message: "请填写密码", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            post({
                url: "/api/danwei/gredit",
                data: toRaw(ruleForm),
            }).then((res: any) => {
                ElMessage.success("修改成功，重新登录后生效");
            });
        } else {
            console.log("error submit!");
        }
    });
};
//表单END---------------------------------------

//图片上传----------------------

const imageUrl = ref("");

const handleAvatarSuccess: UploadProps["onSuccess"] = (
    response,
    uploadFile
) => {
    ruleForm.yyzz = response.data.fullurl;
};
const handleAvatarSuccess2: UploadProps["onSuccess"] = (
    response,
    uploadFile
) => {
    ruleForm.jyxkz = response.data.fullurl;
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
    if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
        ElMessage.error("只能上传jpg或png格式的图片!");
        return false;
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error("图片大小不能超过 2MB!");
        return false;
    }
    return true;
};

//上传end----------------------

const resetdata = () => {
    Object.assign(ruleForm, {
        id: "",
        name: "",
        isdel: 1,
        gslx: "",
        uname: "",
        cltime: "",
        code: "",
        province: "青海省",
        city: "",
        area: "",
        address: "",
        telphone: "",
        jyfw: "",
        yyzz: "",
        jyxkz: "",
    });
    yyzzupload.value.clearFiles();
    jyxkzupload.value.clearFiles();
    isedit.value = true;
    title.value = "新增公司";
};

</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
    margin-bottom: 30px;
    width: 100%;
}
.linebox {
    display: flex;
    align-items: flex-start;
    width: 100%;
}
:deep(.avatar-uploader .avatar) {
    width: 178px;
    height: 178px;
    display: block;
}
:deep(.avatar-uploader .el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
    border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
